<template>
  <div class="yxp-course">
    <TopBack :title="title" type="3" :id="id" :courseId="courseId" :course_type="course_type"  @point="handlePoint"/>

    <div class="yxp-scene-main">
      <div class="main-box">
        <div class="main-box-content">
          <div class="content">
            <div class="content-wrap retell-box scrolToMinView">
              <template>
                <template v-if="articleType === 1 || articleType === 5">
                  <span v-html="zhHead"  :style="{display: 'block',color: '#333'}" @click="handleTips"></span>
                  <span v-for="(item,i) in zhText" :key="'z' + i"  :class="{active: item.isRead && iNow === i, on: item.isRead && iNow !== i}" :style="{'margin-left': item.isStart ? '40px' : 0}"  @click="handleSelect(item,i)" v-html="item.name"></span>
                  <span v-html="zhEnd" :style="{float: 'right',overflow: 'hidden', color: '#333'}" @click="handleTips"></span>
                </template>
                <template v-else-if="articleType === 2">
                  <span v-html="zhHead"  :style="{display: 'block','text-align': 'center',color: '#333'}" @click="handleTips"></span>
                  <span v-for="(item,i) in zhText" :key="'z' + i" :class="{active: item.isRead && iNow === i, on: item.isRead && iNow !== i}" :style="{'margin-left': item.isStart ? '40px' : 0}"  @click="handleSelect(item,i)"  v-html="item.name"></span>
                  <span v-html="zhEnd" :style="{float: 'right',overflow: 'hidden',color: '#333'}" @click="handleTips"></span>
                </template>
                <template v-else-if="articleType === 3">
                  <span v-html="zhHead"  :style="{display: 'block','text-align': 'center',color: '#333'}" @click="handleTips"></span>
                  <span v-for="(item,i) in zhText" :key="'z' + i"  :class="{active: item.isRead && iNow === i, on: item.isRead && iNow !== i}" :style="{'margin-left': item.isStart ? '40px' : 0}" @click="handleSelect(item,i)" v-html="item.name"></span>
                </template>
                <template v-else-if="articleType === 4">
                  <span v-html="zhHead" :style="{display: 'block',color: '#333'}" @click="handleTips"></span>
                  <span v-for="(item,i) in zhText" :key="'z' + i" :class="{active: item.isRead && iNow === i, on: item.isRead && iNow !== i}" :style="{'margin-left': item.isStart ? '40px' : 0}"  @click="handleSelect(item,i)" v-html="item.name"></span>
                </template>
                <template v-else>
                  <span v-for="(item,i) in zhText" :key="'z' + i" :class="{active: item.isRead && iNow === i, on: item.isRead && iNow !== i}" :style="{'margin-left': item.isStart ? '40px' : 0}"  @click="handleSelect(item,i)" v-html="item.name"></span>
                </template>
              </template>
              <!-- <span v-for="(item,i) in zhText" :class="{active: item.isRead && iNow === i, on: item.isRead && iNow !== i}" :key="'z' + i" @click="handleSelect(item,i)" v-html="item.name"></span> -->
            </div>
          </div>
        </div>
        <div class="main-box-content">
          <div class="content eye-wrap">
            <div class="content-wrap retell-box retell-wrap scrolToMinView">
              <div class="eye-box" @click="handleOpen">
                <img src="@/assets/composition/eye-open.png" class="eye-icon" v-if="isOpen"/>
                <img src="@/assets/composition/eye-hide.png" class="eye-icon" v-else />
              </div>
              <div v-if="isOpen">
                <template>
                <template v-if="articleType === 1 || articleType === 5">
                  <span v-html="enHead"  :style="{display: 'block',color: '#333'}" @click="handleTips"></span>
                  <template v-for="(item,i) in enText">
                    <span :key="'e' + i" :class="{active: item.isRead && iNow === i, on: item.isRead && iNow !== i}" v-if="i <= iStep" :style="{'margin-left': item.isStart ? '40px' : 0}" @click="handleSelectEn(item,i)" v-html="item.name"></span>
                  </template>
                  <span v-html="enEnd" v-if="end" :style="{float: 'right',overflow: 'hidden',color: '#333'}" @click="handleTips"></span>
                </template>
                <template v-else-if="articleType === 2">
                  <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}" @click="handleTips"></span>
                  <template v-for="(item,i) in enText">
                    <span :key="'e' + i" :class="{active: item.isRead && iNow === i, on: item.isRead && iNow !== i}" v-if="i <= iStep" :style="{'margin-left': item.isStart ? '40px' : 0}"  @click="handleSelectEn(item,i)" v-html="item.name"></span>
                  </template>
                  <span v-html="enEnd" v-if="end" :style="{float: 'right',overflow: 'hidden',color: '#333'}" @click="handleTips"></span>
                </template>
                <template v-else-if="articleType === 3">
                  <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}" @click="handleTips"></span>
                  <template v-for="(item,i) in enText">
                    <span :key="'e' + i" :class="{active: item.isRead && iNow === i, on: item.isRead && iNow !== i}" v-if="i <= iStep" :style="{'margin-left': item.isStart ? '40px' : 0}" @click="handleSelectEn(item,i)" v-html="item.name"></span>
                  </template>
                </template>
                <template v-else-if="articleType === 4">
                  <span v-html="enHead" :style="{display: 'block',color: '#333'}" @click="handleTips"></span>
                  <template v-for="(item,i) in enText">
                    <span :key="'e' + i" :class="{active: item.isRead && iNow === i, on: item.isRead && iNow !== i}" v-if="i <= iStep" :style="{'margin-left': item.isStart ? '40px' : 0}" @click="handleSelectEn(item,i)" v-html="item.name"></span>
                  </template>
                </template>
                <template v-else>
                  <template v-for="(item,i) in enText">
                    <span :key="'e' + i" :class="{active: item.isRead && iNow === i, on: item.isRead && iNow !== i}" v-if="i <= iStep" :style="{'margin-left': item.isStart ? '40px' : 0}"  @click="handleSelectEn(item,i)" v-html="item.name"></span>
                  </template>
                </template>
              </template>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="scene">
      <div class="scene-btn">
        <div class="scene-btn-item" id="yxp-retell-btn" @click="handleNext">
          <span>格式塔复述训练</span>
          <img src="@/assets/word/no-next.png" v-if="zhText.length - 1 === iStep" class="next" />
        </div>
      </div>
    </div>
    <div class="mark" v-if="isEn"></div>
    <ScenePop :title="popTitle" :isEn="isEn" type="3" :id="id" :courseId="courseId" @closePop="handleClosePop" />
    <audio :src="audioSrc" ref="audio" />
    <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import TopBack from '../components/TopBack.vue'
import ScenePop from '../components/ScenePop.vue'
import Timetips from '@/components/Timetips.vue'
import storage from '@/utils/storage.js'
export default {
  name: 'retell',
  components: {
    TopBack,
    ScenePop,
    Timetips
  },
  data () {
    return {
      title: '英语习得与切片训练',
      courseId:'',
      id: 0,
      course_type: 0,
      zhText: [],
      zhHead: '',
      zhEnd: '',
      enText: [],
      enAudio: [],
      audioSrc: '',
      enHead: '',
      enEnd: '',
      iNow: -1,
      iStep: -1,
      isShow: false,
      isOpen: false,
      isNext: false,
      popTitle: '开始格式塔全文还原训练吧~',
      isEn: false,
      articleType: 0,
      end: false // 最后的结束语
    }
  },
  created () {
    if (this.$route.query.id) {
      let { courseId, id, course_type } = this.$route.query
      this.courseId = +courseId
      this.id = +id
      this.course_type = +course_type
    }
    let data = storage.get('sceneData')
    if (data) {
      this.articleType = data.type
      let zhText = data.sentence_translation
      let enText = data.sentence
      this.enAudio = data.single_voice
      if (this.articleType === 1 || this.articleType === 5 || this.articleType === 2) {
        this.zhHead = zhText.splice(0,1).join('').replace('##','')
        this.zhEnd = zhText.pop()
        this.enHead = enText.splice(0,1).join('').replace('##','')
        this.enEnd = enText.pop()
        if (this.enEnd.indexOf('##')) {
          this.enEnd = this.enEnd.replace('##','<br/>')
        }
        this.enAudio.splice(0,1)
        this.enAudio.pop()
      } else if (this.articleType === 3 || this.articleType === 4) {
        this.zhHead = zhText.splice(0,1).join('').replace('##','')
        this.enHead = enText.splice(0, 1).join('').replace('##','')
        this.enAudio.splice(0,1)
      }

      let zhArr = []
      let enArr = []
      zhText.map(item =>{
        let obj = {}
        let val = ''
        if (item.indexOf('&&') !== -1 && item.indexOf('##') !== -1) {
          let val1 = item.replace('&&', '')
          val = val1.replace('##','<br>')
          obj.name = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = true
          zhArr.push(obj)
        } else if (item.indexOf('&&') !== -1) {
          val = item.replace('&&', '')
          obj.name = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = true
          zhArr.push(obj)
        } else if (item.indexOf('##') !== -1) {
          console.log(item)
          val = item.replace('##','<br>')
          obj.name = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = false
          zhArr.push(obj)
        } else {
          val = item
          obj.name = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = false
          zhArr.push(obj)
        }

      })
      enText.map(item =>{
        let obj = {}
        let val = ''
        if (item.indexOf('&&') !== -1 && item.indexOf('##') !== -1) {
          let val1 = item.replace('&&', '')
          val = val1.replace('##','<br>')
          obj.name = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = true
          enArr.push(obj)
        } else if (item.indexOf('&&') !== -1) {
          val = item.replace('&&', '')
          obj.name = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = true
          enArr.push(obj)
        } else if (item.indexOf('##') !== -1) {
          console.log(item)
          val = item.replace('##','<br>')
          obj.name = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = false
          enArr.push(obj)
        } else {
          val = item
          obj.name = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = false
          enArr.push(obj)
        }

      })
      this.zhText = zhArr
      this.enText = enArr
    }
  },
  methods: {
    handleSelect (item,i) {
      if (!item.isRead) {
        if (i > this.iStep + 1) {
          this.$toast('此句还未解锁')
          return
        } else {
          item.isRead = true
          console.log(this.enText)
          this.$set(this.enText[i], 'isRead', true)
          this.iStep++
          this.iNow = this.iStep
          if (this.iStep === this.enText.length - 1) {
            this.end = true
          }
        }
      } else {
        this.iNow = i
      }
    },
    handleSelectEn (item,i) {
      this.iNow = i
      this.audioSrc = this.enAudio[i]
      let audio = this.$refs.audio
      console.log(audio)
      setTimeout(() => {
        audio.play()
      },10)
    },
    handleOpen () {
      this.isOpen = !this.isOpen
    },
    handleNext () {
      if (this.zhText.length - 1 > this.iStep) return
      this.isEn = true
    },
    handleClosePop (val) {
      this.isEn = val
    },
    handleTips () {
      this.$toast('学习正文吧~')
    },
    handlePoint () {}
  },
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
}
</script>
<style lang='less' scoped>
.ant-tooltip, .ant-slider-tooltip, .ant-tooltip-placement-bottom {
  display: none !important;
}
.eye-wrap {
  padding-top: 60px !important;
}
.retell-box {
  padding-top: 32px !important;
  .active {
        color: #fff;
        background: #27BFA3;
      }
  .on {
    color: #333;
  }
      span {
        line-height: 28px;
        font-size:20px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color: #666;
        cursor: pointer;
        // word-break: break-word;
      }

}
.retell-wrap {
  padding-top: 0 !important;
}
.eye-box {
          position: absolute;
          right: 10px;
          top: 10px;
          width: 40px;
          height: 40px;
          cursor: pointer;
          .eye-icon {
            width: 100%;
            height: 100%;
          }
        }
</style>
